<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
  <nz-select nzAllowClear *ngIf="optionMode==='badge'" [ngModel]="value" (ngModelChange)="change($event)" [nzMode]="mode" [nzCustomTemplate]="custom">
    <nz-option *ngFor="let option of selectList" [nzLabel]="option.label"  nzCustomContent [nzValue]="option.value">
      <nz-badge [nzColor]="option.value" [nzText]="option.label"></nz-badge>
    </nz-option>
    <ng-template #custom let-selected>
      <nz-badge [nzColor]="selected.nzValue" [nzText]="selected.nzLabel"></nz-badge>
    </ng-template>
  </nz-select>


  <nz-select nzAllowClear *ngIf="optionMode==='textColor'" [ngModel]="value" (ngModelChange)="change($event)" [nzMode]="mode"  [nzCustomTemplate]="custom">
    <nz-option *ngFor="let option of selectList" [nzLabel]="option.label"  nzCustomContent [nzValue]="option.value" name="qqqq">
      <span [ngStyle]="{'color':option.color}">{{option.label}}</span>
    </nz-option>
    <ng-template #custom let-selected>
       <span [ngStyle]="getStyle(selected.nzValue)">{{selected.nzLabel}}</span> 
    </ng-template>
  </nz-select> 
</sf-item-wrap>